<template>
    <div>
        <el-dialog title="导出为 excel" @close="closed" :visible.sync="value" width="30%">
            <el-form :model="excelForm">
                <el-input :placeholder="$t('msg.excel.placeholder')" v-model="excelForm.name" autocomplete="off"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closed">取 消</el-button>
                <el-button type="primary" @click="onConfirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getAllUser} from "../../../api/staff"
import {USER_KEY} from "./Export2Excels"
export default {
    name: '',
    props:{
        value:{
            type:Boolean,
            required:true
        }
    },
    data() {
        return {
            excelForm:{
                name:"员工管理表"
            }
        };
    },

    mounted() {
        
    },

    methods: {
        closed(){
            this.$emit("input",false)
        },

        formatJson(headers,rows){
            return rows.map((item)=>{
                return Object.keys(headers).map((key)=>{
                    if(headers[key]==="role"){
                        const roles = item[headers[key]]
                        return JSON.stringify(roles.map((role)=>role.title))
                    }
                    if(headers[key]=="openTime"){
                        return this.$dateFilter(item[headers[key]],"YYYY-MM-DD")
                    }
                    return item[headers[key]]
                })
            })
        },
        async onConfirm(){
            let res = (await getAllUser()).list;
            const excel = await import("../../../utils/Export2Excel")
            const data = this.formatJson(USER_KEY,res)
            excel.export_json_to_excel({
                header:Object.keys(USER_KEY),
                data,
                filename:this.excelForm.name,
                bookType:"xlsx"
            })
            this.closed()
        }
 
    },
};
</script>

<style lang="scss" scoped>
.el-dialog {
  .el-dialog__body {
    height: 40px;
  }
}
</style>